<script setup lang="ts">
import { getAnnouncementByIdApi, getAnnouncementLinkApi, getAnnouncementOSSApi } from '@/api/innovationSquare/competitionApi'
import { onMounted, ref } from 'vue';
import type { Competition } from '../../home/types/Competition'
import { useRoute } from 'vue-router';
import mammoth from 'mammoth';
import router from '@/router';

const route = useRoute()
const competitionId = String(route.params.competitionId);

const competitionUrl = ref<string>('');
const competitionLink = ref<string>('');
const activeKey = ref('1');
const loading = ref(false);
const ossContent = ref<string>('');
const competition = ref<Competition>({
  competitionId: Number(competitionId.valueOf),
  name: '',
  description: '',
  tags: [],
  likeNum: 0,
  shareNum: 0,
  lookNum: 0,
  publisherTime: '',
  status: '',
  likeTrue: false,
  text: '',
});
// 模拟获取 OSS 内容的函数
const fetchDocumentContent = async (url: string) => {
  try {
    // console.log("Fetching document content from URL:", url);
    const response = await fetch(url);
    // console.log("Fetch response received:", response);

    if (!response.ok)
      throw new Error(`HTTP error! status: ${response.status}`);

    const arrayBuffer = await response.arrayBuffer();
    // console.log("ArrayBuffer received:", arrayBuffer);

    const { value: html } = await mammoth.convertToHtml({ arrayBuffer });
    // console.log("Extracted HTML:", html);

    ossContent.value = html; // 替换为实际获取的内容
  }
  catch (err) {
    console.error('Error extracting document content:', err);
  }
};

const fetchCompetition = async () => {
  loading.value = true;

  if (!competitionId) {
    console.error('No projectId found:', competitionId);
    return;
  }
  try {
    const detailsResponse = await getAnnouncementByIdApi(competitionId)
    competition.value = detailsResponse.data;

    const oss = await getAnnouncementOSSApi(competitionId)
    competitionUrl.value = oss.data;

    fetchDocumentContent(competitionUrl.value);
    const link = await getAnnouncementLinkApi(competitionId)
    competitionLink.value = link.data;
  }
  catch (error) {
    console.error('Error fetching competition data:', error);
  }
  finally {
    loading.value = false
  }
}

fetchCompetition();

onMounted(() => {
  fetchCompetition();
});

const onReturnBtnClicked = () => {
  router.push({ path: '/user/dachuang/saishi' });
}
</script>

<template>
  <a-layout>
    <a-button style="margin: 0.5rem;" @click="onReturnBtnClicked()">
      返回主界面
    </a-button>

    <div style="margin: 0.5rem; margin-top: 0rem; background-color: white; border-radius: 0.5rem;">
      <h1 style="font-weight: bold; text-align: center; margin: 0rem; margin-top: 0.5rem;">
        {{ competition ? competition.name : '项目详情' }}
      </h1>

      <div style="font-size: 1.2rem; font-weight: bold; color: #A0A0A0; margin: 0.5rem;">
        发布时间: {{ competition ? competition.publisherTime : '未发布' }}
      </div>

      <div class="tags-container" style="margin: 0.5rem;">
        <a-tag v-for="(tag, index) in competition.tags" :key="index" style="font-size: 1rem; padding: 0.1rem 0.5rem 0.2rem 0.5rem; margin-bottom: 0.2rem;">
          {{ tag }}
        </a-tag>
      </div>

      <div style="display: flex; justify-content: right; margin: 0.5rem;">
        <a :href="competitionLink" target="_blank" rel="noopener noreferrer" style="font-size: 1rem;">
          <a-button type="primary">查看原文</a-button>
        </a>
      </div>
    </div>

    <div style="background-color: white; border-radius: 0.5rem; margin: 0.5rem; overflow-y: auto;">
      <a-tabs v-model="activeKey" style="margin: 0.5rem;">
        <a-tab-pane key="1" tab="赛事详情">
          <div v-html="ossContent || '文档内容无法显示'" />
        </a-tab-pane>

        <a-tab-pane key="2" tab="招募信息">
          <h1 style="font-weight: bold; margin: 0rem; text-align: center;">
            {{ competition.name }}
          </h1>

          <p style="margin-top: 0.5rem;">
            {{ competition.description }}
          </p>

          <h1 style="font-weight: bold; margin: 0rem; text-align: center;">
            赛道介绍
          </h1>

          <p style="margin-top: 0.5rem;">
            {{ competition.text }}
          </p>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-layout>
</template>

<style scoped lang="scss">
</style>
